import React,{memo} from 'react'
import { Button, Form, Input ,Image} from 'antd'

function ZhuCe(props, context){


  const onFinish = (v)=>{}

  const onFinishFailed = (v)=>{}

  const onColset = ()=>{
    console.log(props)
    props.onColset();
  }

  return <>
    <div className="zhuce-main-box">
      <div className="zhuce-title">新用户注册</div>
      <div className="zhuce-from">
        <Form
          name="from"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item label="邮箱">
            <Input className="fromItem"  placeholder="登录邮箱" />
          </Form.Item>
          <Form.Item label="昵称">
            <Input className="fromItem"  placeholder="登录邮箱" />
          </Form.Item>
          <Form.Item label="密码" >
            <Input className="fromItem" placeholder="登录密码" />
          </Form.Item>
          <Form.Item label="确认密码" >
            <Input className="fromItem" placeholder="确认密码" />
          </Form.Item>
          <Form.Item label="验证码" >
            <Input  className="fromItem fromItem2" placeholder="验证码" />
            <Image
              width={120}
              height={40}
              src="error"
              preview={false}
              style={{marginLeft:10,cursor:"pointer"}}
              fallback=""
            />
          </Form.Item>

          <Form.Item  className="button-box" >
            <Button className="form-button">注册</Button>
            <Button onClick={()=>onColset()} className="form-button">取消</Button>
          </Form.Item>


        </Form>
      </div>
    </div>
  </>
}

export default memo(ZhuCe);
